<template><app-layout>
		<view class="template-order">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar> 异地提交</tn-nav-bar>
			<!-- 顶部自定义导航 -->
			<view class="tabs-fixed tn-bg-white">
				<view class="tn-flex tn-flex-col-between tn-flex-col-center tn-padding-top-sm"
					:style="{marginTop: vuex_custom_bar_height + 'px'}">
					<view class="justify-content-item" style="width: 100vw;overflow: hidden;">
						<tn-tabs class="tabs" :list="typelist" :countshow="!!1" :isScroll="false" :current="type"
							name="details" style="width:100vw;" @change="tabsChange"></tn-tabs>
					</view>


				</view>
			</view>
			<userlist @userclick="checkface" :list="userlist" :wtzq="true"></userlist>

		</view>
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import {
		mapGetters,
		mapState
	} from "vuex";

	export default {
		name: 'otherlist',
		mixins: [templatePageMixin],
		data() {
			return {
				type: 0,
				userlist: [],
				page: 1,
				typelist: []
			}
		},
		onLoad() {
			this.getList();
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo,
			}),
		},
		onShow() {
			if (!this.userinfo) {
				this.$user.getInfo()
			}
		},
		onReachBottom() {
			this.getList();
		},

		methods: {
			// 标签栏值发生改变
			tabsChange(index) {
				this.type = index
				this.page = 1;
				this.getList();
			},
			// 跳转
			checkface(user) {
				// 5.当用户组为zr和pcs时，显示下方区域，点进去后显示列表，但无所有业务的录入功能，只能查看。
				if (this.userinfo.usergroup == 'pcs' || this.userinfo.usergroup == 'zr') {
					return false;
				}
				//任务模式 1尿检
				let return_url = `/discoveryPages/urinecheck/add?mfid=${user.mfid}&tid=0&cid=${user.id}`
				//任务模式 2发检
				if (this.type === 1) {
					return_url = `/discoveryPages/hair/add?mfid=${user.mfid}&tid=0&cid=${user.id}&isqrcode=${user.isqrcode}`
				}

				this.$t.vuex('return_url', return_url)
				let url = `/discoveryPages/check?id=${user.mfid}&showagain=1`

				uni.navigateTo({
					url: url
				});
			},
			getList() {
				let t = this;

				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.other_tasklist,
					data: {
						limit_page: t.page,limit_count:20,
						clientlei: t.typelist.length > 0 ? t.typelist[t.type].id : 1,
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.typelist = response.fcfl
						if (this.page !== 1) {
							this.userlist = this.userlist.concat(response.list);
						} else {
							this.userlist = response.list;
						}
						this.page = response.list.length ? this.page + 1 : this.page;
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},



		}
	}
</script>

<style lang="scss" scoped>
	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.face {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	.userlist {
		padding-top: 10rpx;
		position: relative;

		.user {
			position: relative;
			margin: 20rpx;
			padding: 36rpx 26rpx;
			border-radius: 15rpx;
			background-color: #fff;
			box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
		}

		.usertag {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
	}
</style>